<script setup lang="ts">

import { ref } from 'vue';

const count = ref(0)
const dynamicId = ref("1")
const spanClass = ref("red")
const raw_html = "<span style=\"color: red\">This should be red.</span>"

const objectOfAttrs = {
    class: 'green',
    disabled: false
}

const attributeName = "href"
const attributeNameurl = "url"

const eventname = "click"
const doSomething = () => {
    count.value++
}

</script>

<template>
    Hello world

    <div>
        {{ count }}
        <button @click="count++">{{ count }}</button>
    </div>

    <span v-html="raw_html"></span>

    <div id="vbind">
        <div v-bind:id="dynamicId"></div>
        <button :class="spanClass">v-bind实例</button>
        <br> <br> <br>
        <button v-bind="objectOfAttrs">动态绑定多个值</button>
    </div>

    <a v-bind:[attributeName]="attributeNameurl"> 动态参数</a>
    <br> <br> <br> 
    <a :[attributeName]="attributeNameurl"> 快捷动态参数</a>

    <br> <br> <br>
    <a v-bind:[eventname]="doSomething"> 绑定动态事件</a>
    <br> <br> <br> 
    <a @[eventname]="doSomething"> 快捷绑定动态事件</a>

</template>


<style>
.red {
    color: red;
}

.green {
    color: green;
}
</style>